import React from 'react'
import Header from '../../components/Header'
import FooterBar from '../../components/FooterBar'
import Search from '../../components/Search'
import touImg from '../../assets/image/头像 女孩 (3).png'
import { useNavigate } from 'react-router-dom'
import './index.css'




export default function Mess() {
    const navigate = useNavigate()

    const res = {
        name: '匿名用户',
        message: '菜品评价',
        time: '12:33'
    }

    const goPush = () => {
        navigate('/task')
    }

    const renderMess = () => {
        return (
            <>
                <div className='mess_hang' onClick={() => goPush()}>
                    <div className='mess_hang_left'>
                        <div>
                            <img src={touImg} alt="" className='mess_img' />
                        </div>
                        <div className='mess_info'>
                            <h3>{res.name}</h3>
                            <div className='mess_info_xia'>{res.message}</div>
                        </div>
                    </div>
                    <div className='mess_hang_right'>
                        {res.time}
                    </div>
                </div>
                {/* cv */}
                <div className='mess_hang' onClick={() => goPush()}>
                    <div className='mess_hang_left'>
                        <div>
                            <img src={touImg} alt="" className='mess_img' />
                        </div>
                        <div className='mess_info'>
                            <h3>{res.name}</h3>
                            <div className='mess_info_xia'>{res.message}</div>
                        </div>
                    </div>
                    <div className='mess_hang_right'>
                        {res.time}
                    </div>
                </div>

                <div className='mess_hang' onClick={() => goPush()}>
                    <div className='mess_hang_left'>
                        <div>
                            <img src={touImg} alt="" className='mess_img' />
                        </div>
                        <div className='mess_info'>
                            <h3>{res.name}</h3>
                            <div className='mess_info_xia'>{res.message}</div>
                        </div>
                    </div>
                    <div className='mess_hang_right'>
                        {res.time}
                    </div>
                </div>


            </>
        )
    }
    return (
        <div>
            <Header />
            <Search />
            {renderMess()}
            <FooterBar />
        </div>
    )
}
